<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>查看账单</title>
    <!-- 引入layui 样式-->
    <link rel="stylesheet" href="../../static/layer/css/layui.css"/>
    <style type="text/css">
        .zhangdan-jiben-info {
            width: 100%;
            margin-bottom: 20px;
            padding: 30px 30px;
            box-sizing: border-box;
            background-color: #ffffff;
        }

        .bill-box {
            padding: 15px 0;
            border-bottom: 1px dashed #e6eef6;
        }

        .tab-body {
            background-color: #f4f4f4;
            padding: 20px;
            margin-bottom: 50px;
        }

        .blockquote-bottom {
            width: 100%;
            position: fixed;
            margin: 0;
            bottom: 0;
            left: 0;
            text-align: center;
            background-color: #ffffff;
            border-top: 1px solid #f4f4f4;
            z-index: 2;
        }

        .blockquote-bottom-item {
            margin: 15px 0;
        }

        .layui-form-label1 {
            position: relative;
            float: left;
            display: block;
            padding: 9px 15px;
            width: 120px;
            font-weight: normal;
            line-height: 20px;
            text-align: right;
        }

        .label-money {
            position: absolute;
            top: 10px;
            right: 5px;
            font-size: 14px;
            color: #c5d0da;
        }
    </style>
</head>
<body>
<form class="layui-form">
    <div class="layui-tab layui-tab-brief" lay-filter="contractInfoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">账单信息</li>
            <li>修改记录</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="tab-body">
                    <div class="charge-box">
                        <!--基本信息-->
                        <div class="zhangdan-jiben-info">
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    基本信息
                                </div>
                            </div>
                            <hr>
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <label class="layui-form-label1">签订人</label>
                                    <div class="layui-inline">
                                        <input type="text" name="" id="SIGNER" lay-verify="title" autocomplete="off"
                                               placeholder="签订人" class="layui-input" readonly>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <label class="layui-form-label1">账单周期</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="START_DATE" class="layui-input" id="START_DATE"
                                               placeholder="开始时间">
                                    </div>
                                    <div class="layui-inline">
                                        <div class="layui-input-inline">
                                            <input type="text" name="END_DATE" class="layui-input" id="END_DATE"
                                                   placeholder="结束时间">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="layui-row">
                                <div class="sjszTIME">
                                </div>
                                <!--<div class="layui-col-xs6">
                                    <label class="layui-form-label1">实际收租时间</label>
                                    <div class="layui-inline">
                                        <input type="text" name="" id="ACT_PAY_DATE" lay-verify="title"
                                               autocomplete="off"
                                               placeholder="" class="layui-input">
                                    </div>
                                </div>-->
                                <div class="layui-col-xs6">
                                    <label class="layui-form-label1">应收租日期</label>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="PAY_DATE" name="PAY_DATE"
                                               placeholder="应收租日期">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--费用信息-->
                        <div class="zhangdan-jiben-info">
                            <div class="layui-row">
                                <div class="layui-col-xs2">
                                    费用信息
                                </div>
                                <div class="layui-col-xs3">

                                </div>
                            </div>
                            <hr>
                            <div class="layui-row">
                                <!--买卡-->
                                <div class="BuyCard">

                                </div>
                            </div>
                            <div class="layui-row">
                                <!--消费-->
                                <div class="Expense">

                                </div>
                            </div>

                            <br>
                        </div>
                        <!--上传附件-->
                        <div class="uploadfile"></div>
                        <!--附件地址-->
                        <div class="zhangdan-jiben-info">
                            <div class="quote-title">
                                <i class="fa fa-circle-o" aria-hidden="true"></i>
                                <span>备注</span>
                            </div>
                            <div>
                                <div class="layui-input-block">
                                    <textarea placeholder="请输入内容" name="INFO" id="INFO"
                                              class="layui-textarea"></textarea>
                                </div>

                            </div>
                        </div>
                        <!--交易明细-->
                        <div class="hide_jymx">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="tab-body ">
                    <!--审核人-->
                    <div class="zhangdan-jiben-info">
                        <blockquote class="layui-elem-quote layui-text quote-info">详情:</blockquote>
                        <div class="layui-tab-item layui-show">
                            <div class="quote-info">
                                <table id="historySH"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item operate-button-group blockquote-bottom">
                <div class="blockquote-bottom-item">
                            <span class="submits">
                            </span>
                    <button type="reset" class="layui-btn-small layui-btn-primary cancel">取消</button>
                </div>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript" src="../../static/layer/layui.js"></script>
<script type="text/javascript" src="../../static/js/common/queryUtils.js"></script>
<!--<script type="text/javascript" src="../../static/ujs/contract/bill_check.js"></script>-->
<script language="JavaScript">
    //加载查看账单数据
    var uploadfiles = new Array(); // 要上传的文件列表路径
    layui.use(['jquery', 'element', 'layer', 'laydate', 'form', 'table', 'upload'], function () {
        $ = layui.jquery, element = layui.element, layer = layui.layer, laydate = layui.laydate, form = layui.form, table = layui.table;
        var billID = QueryUtils.GetQueryString("BILL_ID");
        var button = QueryUtils.GetQueryString("button");
        var type = QueryUtils.GetQueryString("type");
        var isLATE = QueryUtils.GetQueryString("isLATE");//获取是否有 滞纳金
        var hd = QueryUtils.GetQueryString("hd");//隐藏自用账单的实际收款
        var jymx = QueryUtils.GetQueryString("jymx");//显示交易明细
        var upload = layui.upload;
        var billID = QueryUtils.GetQueryString("BILL_ID");//账单ID
        //获取 账单基本信息 查看
        $.ajax({
            url: "/billController/listBill/",
            data: {ID: billID},
            dataType: "json",
            type: "post",
            async: false,
            success: function (res) {
                if (res.errcode === "0") {
                    //加载 账单基本信息
                    $("#ID").val(res.data.ID);
                    $("#ROOM_NUM").val(res.data.ROOM_NUM);
                    $("#COMPANY_NAME").val(res.data.COMPANY_NAME);
                    $("#START_DATE").val(res.data.START_DATE);
                    $("#END_DATE").val(res.data.END_DATE);
                    $("#PAY_DATE").val(res.data.PAY_DATE);
                    $("#ACT_PAY_DATE").val(res.data.ACT_PAY_DATE);//实际收租时间
                    $("#PAY_PRICE").val(res.data.PAY_PRICE);//实际收的金额
                    $("#RENT").val(res.data.TOTAL_PRICE);
                    $("#BOND").val(res.data.BOND);
                    $("#SIGNER").val(res.data.SIGNER);//签订人
                    $("#ACT_PAY_DATE").val(res.data.ACT_PAY_DATE);//实际付款时间
                    if(!!res.data.PART_START){
                        //消费
                        $(".Expense").html('<div class="layui-col-xs6">\n' +
                            '                                    <label class="layui-form-label1">停车开始时间:</label>\n' +
                            '                                    <div class="layui-inline">\n' +
                            '                                        <input type="text" id="PART_START" name="PART_START" lay-verify="title"\n' +
                            '                                               placeholder="" class="layui-input" readonly>\n' +
                            '                                    </div>\n' +
                            '                                </div>\n' +
                            '                                <div class="layui-col-xs6">\n' +
                            '                                    <label class="layui-form-label1">停车结束时间:</label>\n' +
                            '                                    <div class="layui-inline">\n' +
                            '                                        <input type="text" id="PART_END" name="PART_END" lay-verify="title"\n' +
                            '                                               placeholder="" class="layui-input" readonly>\n' +
                            '                                    </div>\n' +
                            '                                </div>\n'+
                            '                            <div class="layui-row">\n' +
                            '                                <div class="layui-col-xs6">\n' +
                            '                                    <label class="layui-form-label1">消费卡数量</label>\n' +
                            '                                    <div class="layui-inline">\n' +
                            '                                        <input type="text" id="PARK_CARD" name="PARK_CARD" lay-verify="title"\n' +
                            '                                               placeholder="" class="layui-input" readonly>\n' +
                            '                                        <span class="label-money">张</span>\n' +
                            '                                    </div>\n' +
                            '                                </div>\n'+
                            '                                <div class="layui-col-xs6">\n' +
                            '                                    <label class="layui-form-label1">消费金额</label>\n' +
                            '                                    <div class="layui-inline">\n' +
                            '                                        <input type="text" id="part_price" name="part_price" lay-verify="title"\n' +
                            '                                               placeholder="" class="layui-input" readonly>\n' +
                            '                                        <span class="label-money">元</span>\n' +
                            '                                    </div>\n' +
                            '                                </div>\n'+
                            '                            </div>\n'+
                            '                            <div class="layui-row">\n' +
                            '                                <div class="layui-col-xs6">\n' +
                            '                                    <label class="layui-form-label1">收费类型</label>\n' +
                            '                                    <div class="layui-inline">\n' +
                            '                                        <input type="text" id="ALLOT_BILL" name="" lay-verify="title"\n' +
                            '                                               placeholder="" class="layui-input" value="公户" readonly>\n' +
                            '                                    </div>\n' +
                            '                                </div>\n' +
                            '                            </div>');
                        $("#PART_START").val(res.data.PART_START);//停车开始时间
                        $("#PART_END").val(res.data.PART_END);//停车结束时间
                        $("#PARK_CARD").val(res.data.PARK_CARD);//买卡数量
                    }else {
                        //买卡
                        $(".BuyCard").html('<div class="layui-col-xs6">\n' +
                            '                                    <label class="layui-form-label1">停车场费用</label>\n' +
                            '                                    <div class="layui-inline">\n' +
                            '                                        <input type="text" id="part_price" name="part_price" lay-verify="title"\n' +
                            '                                               placeholder="" class="layui-input" readonly>\n' +
                            '                                        <span class="label-money">元</span>\n' +
                            '                                    </div>\n' +
                            '                                </div>\n' +
                            '                                <div class="layui-col-xs6">\n' +
                            '                                    <label class="layui-form-label1">买卡数量</label>\n' +
                            '                                    <div class="layui-inline">\n' +
                            '                                        <input type="text" id="PARK_CARD" name="PARK_CARD" lay-verify="title"\n' +
                            '                                               placeholder="" class="layui-input" readonly>\n' +
                            '                                        <span class="label-money">张</span>\n' +
                            '                                    </div>\n' +
                            '                                </div>\n'+
                            '                            <div class="layui-row">\n' +
                            '                                <div class="layui-col-xs6">\n' +
                            '                                    <label class="layui-form-label1">收费类型</label>\n' +
                            '                                    <div class="layui-inline">\n' +
                            '                                        <input type="text" id="ALLOT_BILL" name="" lay-verify="title"\n' +
                            '                                               placeholder="" class="layui-input" value="公户" readonly>\n' +
                            '                                    </div>\n' +
                            '                                </div>\n' +
                            '                            </div>');
                        $("#PARK_CARD").val(res.data.PARK_CARD);//买卡数量
                    }
                    $("#part_price").val(res.data.TOTAL_PRICE);//停车费用
                    $("#INFO").val(res.data.INFO);
                    $("#ALLOT_BILL").val(res.data.ALLOT_BILL);
                    if ("公户" === res.data.ALLOT_BILL) {
                        $("#select1").attr("selected", "selected");
                    }
                    if ("私户" === res.data.ALLOT_BILL) {
                        $("#select2").attr("selected", "selected");
                    }
                    form.render("select");
                    //收费信息
                    var zujin = res.data.TOTAL_PRICE;
                    var yajin = res.data.BOND;
                    var zafei = res.data.TOTAL_PRICE;
                    // 初始化附件
                    if ("edit" == button) {
                        var attachments = res.attachmentData;
                        if (!!attachments) {
                            var host = location.host;
                            for (var i = 0; i < attachments.length; i++) {
                                var attachment = attachments[i];
                                var demoListView = $('#demoList');
                                var tr = $(['<tr id="upload-' + (i + 1) + '">'
                                    , '<td><img src="http://' + host + '/' + attachment.PATH + '" alt="' + attachment.NAME + '" class="layui-upload-img"></td>'
                                    , '<td>' + attachment.NAME + '</td>'
                                    , '<td>' + (attachment.SIZE / 1014).toFixed(1) + 'kb</td>'
                                    , '<td><span style="color: #5FB878;">上传成功</span></td>'
                                    , '<td>'
                                    , '<a onclick=\'operate.deleteImg(this, "' + attachment.ID + '");\' class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</a>'
                                    , '</td>'
                                    , '</tr>'].join(''));
                                demoListView.append(tr);

                                var obj = {};
                                obj.id = attachment.ID;
                                obj.name = attachment.NAME;
                                obj.size = attachment.SIZE;
                                obj.ext = attachment.EXT;
                                obj.url = attachment.PATH;
                                uploadfiles.push(obj);
                            }
                        }
                    } else {
                        var attachments = res.attachmentData;
                        if (!!attachments) {
                            var host = location.host;
                            for (var i = 0; i < attachments.length; i++) {
                                var attachment = attachments[i];
                                var demoListView = $('#demoList');
                                var tr = $(['<tr id="upload-' + (i + 1) + '">'
                                    , '<td><img src="http://' + host + '/' + attachment.PATH + '" alt="' + attachment.NAME + '" class="layui-upload-img"></td>'
                                    , '<td>' + attachment.NAME + '</td>'
                                    , '<td>' + (attachment.SIZE / 1014).toFixed(1) + 'kb</td>'
                                    , '<td><span style="color: #5FB878;">上传成功</span></td>'
                                    , '<td>'
                                    , '<span><a href="http://' + window.location.host + '/' + attachment.PATH + '" target="_blank" class=\"layui-btn layui-btn-mini layui-btn-normal\">下载</a></span>\n'
                                    , '</td>'
                                    , '</tr>'].join(''));
                                demoListView.append(tr);

                                var obj = {};
                                obj.id = attachment.ID;
                                obj.name = attachment.NAME;
                                obj.size = attachment.SIZE;
                                obj.ext = attachment.EXT;
                                obj.url = attachment.PATH;
                                uploadfiles.push(obj);
                            }
                        }
                    }

                } else if (res.errcode === "1") {
                    layer.msg(res.errmsg, function () {
                    });
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.error(XMLHttpRequest.status);
                console.error(XMLHttpRequest.readyState);
                console.error(textStatus);
            }
        })
        //操作详情
        var data = {};
        data.BILL_ID = billID;
        table.render({
            elem: '#historySH'
            , url: '/recordController/list'
            , where: data
            , cols: [[
                {field: 'DETAILS', event: 'setSign', title: '操作详情', width: 300}
                , {field: 'OPERATOR', event: 'setSign', title: '操作人', width: 150}
                , {field: 'OPERA_TIME', event: 'setSign', title: '操作时间', width: 150}

            ]]
            , id: ''
            , page: true
            , height: 'auto'
            , limit: '10'
            , size: 'sm' //小尺寸的表格
        });
        //多文件列表示例
        var files;
        var demoListView = $('#demoList')
            , uploadListIns = upload.render({
            elem: '#testList'
            , url: '/servlet/UploadHandleServlet'
            // ,accept: 'file'
            , multiple: true
            , auto: false
            , bindAction: '#testListAction'
            , choose: function (obj) {
                files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img"></td>'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                        return false;
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                    });

                    demoListView.append(tr);
                });
            }
            , done: function (res, index, upload) {
                if (res.errcode == 0) { //上传成功
                    var obj = {};
                    obj.name = res.data.fileName;
                    obj.ext = res.data.extName;
                    obj.url = res.data.fileUrl;
                    uploadfiles.push(obj);
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(4).html(''); //清空操作
                    delete files[index]; //删除文件队列已经上传成功的文件
                    return;
                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });

        //取消
        $(".cancel").click(function () {
            var index = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引
            parent.layer.close(index); // 再执行关闭
        });
    });
</script>
</body>
</html>